import Overlay from 'ol/Overlay'
import * as olProj from 'ol/proj'
export default {
  data () {
    return {
      bShowTopLabel: false, // 显示顶部标签（显示顶牌） boolean
      sBubbleStyle: 'normal' // 气泡当前应用场景类型
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {
    /**
    * @description 程序休眠
    * @param ms {number}休眠时间，单位是毫秒
    * @return
    */
    sleep (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },

    // 设置气泡当前应用场景类型
    setBubbleStyle (sStyle) {
      this.sBubbleStyle = sStyle
    },
    // 获取气泡当前应用场景类型
    getBubbleStyle () {
      return this.sBubbleStyle
    },

    /**
     * @description 添加气泡
     * @param sID {String} 生成气泡的id，sDataType {String} 数据类型;
     *             aCoord{Array}气泡的在地图上的坐标，oPopInfo {Object} 气泡信息对象,
     *             sSRS {String}当前数据（坐标）的参考坐标系，oMap{Object}地图对象
     * @return
     */
    addBubble_old (sID, sDataType, aCoord, oPopInfo, sSRS = 'EPSG:4326', oMap = this.imap) {
      // 检查气泡是否已经存在
      // console.log(sID, sDataType, aCoord, oPopInfo, sSRS, oMap)
      const hasBubble = document.getElementById(sID) // overlayID - 气泡html元素id
      if (hasBubble) return // 如果已经创建气泡，返回不在创建
      // 需要校验下坐标，如果经纬度无效返回不做处理
      if (!aCoord || aCoord.length === 0) return

      // 调用创建气泡方法（返回一个气泡HTML对象）
      const oBubbleInfo = {
        id: sID,
        dType: sDataType,
        bubble: oPopInfo
      }

      // const bubbleDIV =  this.$refs.iBubble.createSingleBubble(oPopInfo)
      this.$refs.iBubble.createSingleBubble(oPopInfo)
      // 只有3857坐标系
      // 添加气泡

      // 获取当前地图坐标系-投影;实际就是this.conf.RCS
      // let sourceProj = oMap.getView().getProjection()
      // let sourceProj = this.conf.RCS

      let aCoordinate = aCoord
      if (sSRS !== this.conf.RCS) {
        // aCoordinate = olProj.transform(aCoord, 'EPSG:4326', sourceProj) // [longitude, latitude]
        aCoordinate = olProj.transform(aCoord, sSRS, this.conf.RCS)
      }

      // let overlay = document.getElementById('pop-container') // 获取气泡容器
      // overlay.appendChild(bubbleDIV)
      const bubbleDIV = document.getElementById(sID)
      // 是否需要sleep等待一下？
      console.log(bubbleDIV)
      // this.sleep(300)
      // 生成新的Overlay（气泡）
      const newBubble = new Overlay({
        id: sID,
        position: aCoordinate,
        positioning: 'TOP_CENTER',
        element: bubbleDIV,
        insertFirst: false,
        stopEvent: true
      })
      newBubble.set('type', 'pop') // 删除时确认类型（区分是否为气泡）
      // 将气泡添加到地图中！
      oMap.addOverlay(newBubble)
    },
    // 新加，添加了创建气泡的类型(2021)
    // addBubble (sID, sDataType, aCoord, oPopInfo, sSRS = 'EPSG:4326', oMap = this.imap, style = 'normal') {
    // 更新，style需要根据当前sBubbleStyle属性设置（使用setBubbleStyle设置）--20110618
    addBubble (sID, sDataType, aCoord, oPopInfo, sSRS = 'EPSG:4326', oMap = this.imap, style = this.sBubbleStyle) {
      // 检查气泡是否已经存在
      // console.log(sID, sDataType, aCoord, oPopInfo, sSRS, oMap)
      const hasBubble = document.getElementById(sID) // overlayID - 气泡html元素id
      if (hasBubble && this.bShowTopLabel) { // 如果气泡已经存在并且bShowTopLable为ture（显示简单气泡-顶牌） // && style === 'normal'
        this.clearBubbleByID(sID)
      } else if (hasBubble) {
        return // 如果已经创建气泡，返回不在创建 -- 气泡不是顶牌
      }

      // 需要校验下坐标，如果经纬度无效返回不做处理
      if (!aCoord || aCoord.length === 0) return

      // const bubbleDIV =  this.$refs.iBubble.createSingleBubble(oPopInfo)
      console.log(oPopInfo) // 如果没有气泡信息，不显示！
      if (!oPopInfo.bubble || oPopInfo.bubble === {}) {
        return
      }
      this.$refs.iBubble.createSingleBubble(oPopInfo, style)
      // 只有3857坐标系
      // 添加气泡

      // 获取当前地图坐标系-投影;实际就是this.conf.RCS
      // let sourceProj = oMap.getView().getProjection()
      // let sourceProj = this.conf.RCS

      let aCoordinate = aCoord
      if (sSRS !== this.conf.RCS) {
        // aCoordinate = olProj.transform(aCoord, 'EPSG:4326', sourceProj) // [longitude, latitude]
        aCoordinate = olProj.transform(aCoord, sSRS, this.conf.RCS)
      }

      // let overlay = document.getElementById('pop-container') // 获取气泡容器
      // overlay.appendChild(bubbleDIV)
      const bubbleDIV = document.getElementById(sID)
      // 是否需要sleep等待一下？
      // console.log(bubbleDIV)
      // this.sleep(300)
      // 生成新的Overlay（气泡）
      const newBubble = new Overlay({
        id: sID,
        position: aCoordinate,
        positioning: 'TOP_CENTER',
        element: bubbleDIV,
        insertFirst: false,
        stopEvent: true
      })
      newBubble.set('type', 'pop') // 删除时确认类型（区分是否为气泡）
      // 将气泡添加到地图中！
      oMap.addOverlay(newBubble)
    },

    /**
     * @description 删除所有的气泡
     * @param oMap{Object}地图对象
     * @return null
     */
    clearAllBubble (oMap = this.imap) {
      const aBubbleList = oMap.getOverlays()
      // console.log(typeof aBubbleList)
      const iItemCount = aBubbleList.getLength()
      // console.log(iItemCount)
      for (let i = iItemCount - 1; i >= 0; i--) {
        if (aBubbleList.item(i).get('type') === 'pop') {
          // oMap.removeOverlay(element)
          aBubbleList.remove(aBubbleList.item(i))
        }
      }
    },

    /**
     * @description 删除所有的overlay
     * @param oMap{Object}地图对象
     * @return null
     */
    clearAllOverlay (oMap = this.imap) {
      oMap.getOverlays().clear()
    },

    /**
     * @description 根据给定的气泡ID，删除指定的气泡
     * @param sBubbleID {String} 气泡的id，oMap{Object}地图对象
     * @return null
     */
    clearBubbleByID (sBubbleID, oMap = this.imap) {
      const bubbleLay = oMap.getOverlayById(sBubbleID)
      if (bubbleLay) {
        oMap.removeLayer(bubbleLay)
      }
      const bubbleDIV = document.getElementById(sBubbleID)
      if (bubbleDIV) {
        bubbleDIV.parentNode.removeChild(bubbleDIV)
      }
    },

    /**
     * @description 根据feaure的ID显示气泡
     * @param {String} sID feature的ID
     * @param {String} sLayerName 当前要处理的图层名称；
     * @param {Object} oMap 地图对象；
     * @return null
    */
    showBubbleByID (sID, sLayerName = 'poiLayer', oMap = this.imap) {
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      const oPoiLay = oMapLayer.getSource()
      const oFeature = oPoiLay.getFeatureById(sID)
      console.log(sID, oFeature)
      if (oFeature) { // 找到id指定的feature
        const sGeoType = oFeature.getGeometry().getType()
        if (sGeoType === 'Point') {
          const xID = 'pop' + oFeature.getId()
          const xType = oFeature.get('dType')
          const xCoord = oFeature.getGeometry().getCoordinates()
          const xBubble = oFeature.get('Bubble')
          if (!xBubble) return // 没有气泡信息，不显示气泡
          // 气泡信息
          const iParam = {
            id: xID, // 信息点ID
            dType: xType,
            // coord: xCoord,
            // position: xCoord, // { x: 100, y: 120 },
            bubble: xBubble
          }
          this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap)
        }
      }
    },
    /**
     * @description 将所有气泡标注位为1的元素打开气泡
     * @param sLayerName {String}当前要处理的图层名称；oMap{Object}地图对象；
     * @return null
    */
    showBubble (sLayerName = 'poiLayer', oMap = this.imap) {
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const featurePop = featureList[j].get('iPop') // 气泡显示标志位
        console.log(featurePop)
        if (!featurePop) {
          continue
        } else {
        // if (featurePop > 0) {
          const sGeoType = featureList[j].getGeometry().getType()
          if (sGeoType === 'Point') {
            const xID = 'pop' + featureList[j].getId()
            const xType = featureList[j].get('dType')
            const xCoord = featureList[j].getGeometry().getCoordinates()
            const xBubble = featureList[j].get('Bubble')
            // 气泡信息
            const iParam = {
              id: xID, // 信息点ID
              dType: xType,
              // coord: xCoord,
              // position: xCoord, // { x: 100, y: 120 },
              bubble: xBubble
            }
            // let sourceProj = this.imap.getView().getProjection()
            // this.addBubble (xID, xType, xCoord, iParam, 'EPSG:3857', oMap)
            // 当前地图中的feature坐标一定是和map使用的坐标相同，所以数据坐标这里使用了this.conf.RCS
            this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap)
          }
        }
      }
    },

    /**
     * @description 显示所有的气泡（默认是simple：简单标签）
     * @param sLayerName {String}当前要处理的图层名称；oMap{Object}地图对象；
     * @return null
    */
    showAllBubble (sStyle = 'simple', sLayerName = 'poiLayer', oMap = this.imap) {
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      // 不做筛选将所有的point气泡全部显示
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const sGeoType = featureList[j].getGeometry().getType()
        if (sGeoType === 'Point') {
          const xBubble = featureList[j].get('Bubble')
          if (!xBubble || xBubble === {}) {
            continue // 如果没有气泡信息，不显示气泡。继续后面数据的处理
          }
          const xID = 'pop' + featureList[j].getId()
          const xType = featureList[j].get('dType')
          const xCoord = featureList[j].getGeometry().getCoordinates()

          // 气泡信息
          const iParam = {
            id: xID, // 信息点ID
            dType: xType,
            // coord: xCoord,
            // position: xCoord, // { x: 100, y: 120 },
            bubble: xBubble
          }
          // 当前地图中的feature坐标一定是和map使用的坐标相同，所以数据坐标这里使用了this.conf.RCS
          this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap, sStyle)
        }
      }
    },

    /**
     * @description 显示所有的气泡（默认是simple：简单标签）
     * @param sType 显示气泡的类型 Point LineString Polygon Circle
     * @param sStyle 气泡的样式
     * @param sLayerName {String}当前要处理的图层名称；oMap{Object}地图对象；
     * @return null
    */
    showAllBubbleByType (sType = 'Point', sStyle = 'simple', sLayerName = 'poiLayer', oMap = this.imap) {
      sType = sType.toLowerCase()
      // 根据名称获取指定的图层Point
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      // 不做筛选将所有的point气泡全部显示
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const sGeoType = featureList[j].getGeometry().getType()
        console.log(sGeoType)
        if (sGeoType.toLowerCase() === sType) { // 'Point'
          const xBubble = featureList[j].get('Bubble')
          if (!xBubble || xBubble === {}) {
            continue // 如果没有气泡信息，不显示气泡。继续后面数据的处理
          }
          const xID = 'pop' + featureList[j].getId()
          const xType = featureList[j].get('dType')
          // const xCoord = featureList[j].getGeometry().getCoordinates()
          // const xCoord = featureList[j].getGeometry().getExtent().getCenter()
          let xCoord = null
          switch (sType) {
            case 'polygon':
            case 'multipolygon':
              xCoord = featureList[j].getGeometry().getInteriorPoint().getCoordinates()
              break
            case 'point':
              xCoord = featureList[j].getGeometry().getCoordinates()
              break
            case 'circle':
              xCoord = featureList[j].getGeometry().getCenter()
              break
            // case 'linestring':
            //   xCoord = featureList[j].getGeometry().getLastCoordinate()
            //   break
            default: // case 'linearring': MultiPoint MultiPolygon SimpleGeometry
              xCoord = featureList[j].getGeometry().getLastCoordinate()
          }
          console.log(xCoord)

          // 气泡信息
          const iParam = {
            id: xID, // 信息点ID
            dType: xType,
            // coord: xCoord,
            // position: xCoord, // { x: 100, y: 120 },
            bubble: xBubble
          }
          // 当前地图中的feature坐标一定是和map使用的坐标相同，所以数据坐标这里使用了this.conf.RCS
          this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap, sStyle)
        }
      }
    },

    // 这里显示的气泡是普通（详细）气泡
    showAllMarker (sLayerName, oMap = this.imap) {
      // 获取当前地图的坐标参考系统；用this.conf.RCS代替
      // const sCRS = oMap.getView().getProjection().getCode()
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const sGeoType = featureList[j].getGeometry().getType()
        // 只处理点信息
        if (sGeoType !== 'Point') {
          continue
        }
        // 闪烁显示
        const featureFlash = featureList[j].get('iFlash')
        if (featureFlash) {
          const id = featureList[j].getId()
          const aPnt = featureList[j].getGeometry().getCoordinates()
          console.log(aPnt)
          // 在mapFlash.js中;cardMap中混入（后期是否将flash和bubble合并）
          // this.addCSSflash(id, aPnt, sCRS, oMap) // 从地图中获取的feature的坐标系就是地图坐标系，如：'EPSG:3857'；
          this.addCSSflash(id, aPnt, this.conf.RCS, oMap) // 用this.conf.RCS代替
        }
        // 气泡显示
        const bFeaturePop = featureList[j].get('iPop')
        if (bFeaturePop) {
          const xID = 'pop' + featureList[j].getId()
          const xType = featureList[j].get('dType')
          const xCoord = featureList[j].getGeometry().getCoordinates()
          const xBubble = featureList[j].get('Bubble')
          // 气泡信息
          const iParam = {
            id: xID, // 信息点ID
            dType: xType,
            bubble: xBubble
          }
          // this.addBubble (xID, xType, xCoord, iParam, 'EPSG:3857', oMap)
          // 从地图中获取的feature器坐标系就是地图坐标系
          // this.addBubble (xID, xType, xCoord, iParam, sCRS, oMap)
          this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap) // 用this.conf.RCS代替
        }
      }
    },

    // 显示所有POI的气泡
    showAllMarkerExt (sLayerName, sStyle = 'normal', oMap = this.imap) {
      // 获取当前地图的坐标参考系统；用this.conf.RCS代替
      // const sCRS = oMap.getView().getProjection().getCode()
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap) // 方法在mapBase中定义
      if (!oMapLayer) {
        return
      }
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const sGeoType = featureList[j].getGeometry().getType()
        // 只处理点信息
        if (sGeoType !== 'Point') {
          continue
        }
        // 闪烁显示
        const featureFlash = featureList[j].get('iFlash')
        if (featureFlash) {
          const id = featureList[j].getId()
          const aPnt = featureList[j].getGeometry().getCoordinates()
          console.log(aPnt)
          // 在mapFlash.js中;cardMap中混入（后期是否将flash和bubble合并）
          // this.addCSSflash(id, aPnt, sCRS, oMap) // 从地图中获取的feature的坐标系就是地图坐标系，如：'EPSG:3857'；
          this.addCSSflash(id, aPnt, this.conf.RCS, oMap) // 用this.conf.RCS代替
        }
        // 气泡显示
        // --const bFeaturePop = featureList[j].get('iPop')
        // -if (bFeaturePop) {
        const xID = 'pop' + featureList[j].getId()
        const xType = featureList[j].get('dType')
        const xCoord = featureList[j].getGeometry().getCoordinates()
        const xBubble = featureList[j].get('Bubble')
        // 气泡信息
        const iParam = {
          id: xID, // 信息点ID
          dType: xType,
          bubble: xBubble
        }
        // this.addBubble (xID, xType, xCoord, iParam, 'EPSG:3857', oMap)
        // 从地图中获取的feature器坐标系就是地图坐标系
        // this.addBubble (xID, xType, xCoord, iParam, sCRS, oMap, sStyle) // sStyle 气泡类型：simple，nomal
        this.addBubble(xID, xType, xCoord, iParam, this.conf.RCS, oMap, sStyle) // 用this.conf.RCS代替
        // -}
      }
    },
    /**
     * @description 关闭气泡气泡根据id
     * @param sBubbleID {String} 气泡的id，oMap{Object}地图对象
     * @return null
    */
    closeBubbleById (sBubbleID, oMap = this.imap) {
      // console.log(sBubbleID)
      const bubbleLay = oMap.getOverlayById(sBubbleID)
      // console.log(bubbleLay)addBubble (sID, sDataType, aCoord, oPopInfo, sSRS = 'EPSG:4326', oMap = this.imap, style = 'normal')
      if (bubbleLay) {
        const sID = bubbleLay.getId()
        oMap.removeOverlay(bubbleLay) // 删除气泡
        // 如果气泡默认显示顶牌，关闭后需要重新显示顶牌
        if (this.bShowTopLabel) { // 显示顶牌
          const oMapLayer = this.getLayerByName('poiLayer', oMap) // 方法在mapBase中定义 ; sLayerName = 'poiLayer'
          if (!oMapLayer) {
            return
          }
          const fID = sID.substr(3)
          const oFeature = oMapLayer.getSource().getFeatureById(fID)
          if (oFeature) {
            const sGeoType = oFeature.getGeometry().getType().toLowerCase()
            const xType = oFeature.get('dType')
            // const xCoord = oFeature.getGeometry().getCoordinates()
            let xCoord = null
            switch (sGeoType) {
              case 'polygon':
              case 'multipolygon':
                xCoord = oFeature.getGeometry().getInteriorPoint().getCoordinates()
                break
              case 'point':
                xCoord = oFeature.getGeometry().getCoordinates()
                break
              case 'circle':
                xCoord = oFeature.getGeometry().getCenter()
                break
              // case 'linestring':
              //   xCoord = featureList[j].getGeometry().getLastCoordinate()
              //   break
              default: // case 'linearring': MultiPoint MultiPolygon SimpleGeometry
                xCoord = oFeature.getGeometry().getLastCoordinate()
            }
            const xBubble = oFeature.get('Bubble')
            // 气泡信息
            const iParam = {
              id: sID, // 信息点ID
              dType: xType,
              // coord: xCoord,
              // position: xCoord, // { x: 100, y: 120 },
              bubble: xBubble
            }
            // 当前地图中的feature坐标一定是和map使用的坐标相同，所以数据坐标这里使用了this.conf.RCS
            this.addBubble(sID, xType, xCoord, iParam, this.conf.RCS, oMap, 'simple')
          }
        }
      }
    },

    /**
     * @description 关闭显示顶牌（简单气泡）
     * @param sBubbleID {String} 气泡的id，oMap{Object}地图对象
     * @return null
    */
    closeTopLabel () {
      if (this.bShowTopLabel) {
        this.bShowTopLabel = false
        this.clearAllBubble()
      }
    },

    /**
     * @description 关闭显示顶牌（简单气泡）
     * @param sBubbleID {String} 气泡的id，oMap{Object}地图对象
     * @return null
    */
    // openTopLabel () {
    //   if (!this.bShowTopLabel) {
    //     this.bShowTopLabel = true
    //     this.showAllBubble() // 默认显示顶牌（简单气泡）
    //   }
    // }
    openTopLabel (sType = 'Point') {
      if (!this.bShowTopLabel) {
        this.bShowTopLabel = true
        this.showAllBubbleByType(sType) // 默认显示顶牌（简单气泡）
      }
    }
    // 当前方法
  }
}
